const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      bable = require('gulp-babel'),
      uglify = require('gulp-uglify'),
      del = require('del'),
      connect = require('gulp-connect'),
      scss = require('gulp-sass')

const paths = {
    html : {
        src : 'src/**/*.html',
        dest : 'dist'
    },
    css : {
        src : 'src/css/**/*.scss',
        dest : 'dist/css'
    },
    js : {
        src : 'src/js/**/*.js',
        dest : 'dist/js'
    },
    libs : {
        src : 'src/libs/**',
        dest : 'dist/libs'
    },
    img : {
        src : 'src/img/**',
        dest : 'dist/img'
    },
    font : {
        src : 'src/font/**',
        dest : 'dist/font'
    },
    api : {
        src : 'src/api/**/*.php',
        dest : 'dist/api'
    }
}     
const html = () => {
    return gulp.src(paths.html.src).pipe(htmlmin({
        removeComments:true,//清除HTML注释
        collapseWhitespace:true,//压缩HTML
        collapseBooleanAttributes:true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      	removeEmptyAttributes:true,//删除所有空格作属性值 <input id="" /> ==> <input />
      	removeScriptTypeAttributes:false,//删除<script>的type="text/javascript"
      	removeStyleLinkTypeAttributes:true,//删除<style>和<link>的type="text/css"
      	minifyJS:true,//压缩页面JS
      	minifyCSS:true//压缩页面CSS
    })).pipe(gulp.dest(paths.html.dest)).pipe(connect.reload())
}
const css = () => {
    return gulp.src(paths.css.src).pipe(scss())
    .pipe(cleanCss()).pipe(gulp.dest(paths.css.dest)).pipe(connect.reload())
}
const js = () => {
    return gulp.src(paths.js.src).pipe(bable({
        presets: ['@babel/env']
    })).pipe(uglify()).pipe(gulp.dest(paths.js.dest)).pipe(connect.reload())
}
const img = () => {
    return gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))
}
const libs = () => {
    return gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
}
const font = () => {
    return gulp.src(paths.font.src).pipe(gulp.dest(paths.font.dest))
}
const api = () => {
    return gulp.src(paths.api.src).pipe(gulp.dest(paths.api.dest))
}
const delDist = () => del('dist')
const server = () =>{
    return connect.server({
        root : 'dist',
        port : '8849',
        livereload : true
    })
}
const watch  = () => {
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.css.src,css)
    gulp.watch(paths.js.src,js)
    gulp.watch(paths.api.src,api)
}

module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,img,libs,font,api,server,watch))
